<template>
  <div id="invoice">
    <top-bar :title="title" v-show="IsTopbar"></top-bar>
    <md-scroll-view
      class="scroll-view"
      ref="scrollView"
      :scrolling-x="false"
      :auto-reflow="true"
      @refreshing="onRefresh"
      @endReached="onLoadMore"
    >
      <md-scroll-view-refresh
        slot="refresh"
        slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
        :scroll-top="scrollTop"
        :is-refreshing="isRefreshing"
        :is-refresh-active="isRefreshActive"
      ></md-scroll-view-refresh>
      <div class="invoice_list" v-for="(item,index) in data" :key="index">
        <p>
          <md-icon name="snkc_xcqx_time" slot="left" class="shangchedian"></md-icon>
          {{item.createTime}}
          <span class="invoice_orderType">{{item.orderType}}{{item.carType}}</span>
        </p>
        <p>
          <md-icon name="shangchedian" slot="left" class="shangchedian"></md-icon>
          {{item.originLabel}}
        </p>
        <p>
          <md-icon name="xiachedian" slot="left" class="shangchedian"></md-icon>
          {{item.destLabel}}
          <span class="invoice_money">{{item.lastAmt}}元</span>
        </p>
      </div>
      <md-scroll-view-more slot="more"></md-scroll-view-more>
    </md-scroll-view>
  </div>
</template>

<script>
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import '@/assets/svgs/snkc_xcqx_time.svg';
import {
  Tabs,
  Icon,
  Field,
  InputItem,
  Toast,
  Radio,
  Dialog,
  ScrollView,
  ScrollViewRefresh,
  ScrollViewMore
} from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import Utils from '@/common/pakjUtils';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import http from '@/common/http';
var CryptoJS = require('crypto-js');
var moment = require('moment');
moment.locale('zh-cn');
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Radio.name]: Radio,
    [InputItem.name]: InputItem,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ScrollViewMore.name]: ScrollViewMore
  },
  data() {
    return {
      title: '所含行程',
      data: [],
      page_no: 1,
      page_size: 6,
      has_next_page: true,
      IsTopbar: true
    };
  },
  mounted() {
    this.invoicetripList(this.page_no);
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
    }
  },
  methods: {
    // 获取开票所包含的行程
    invoicetripList(page) {
      var param = {
        page_no: page, // 页码
        page_size: this.page_size, // 每页显示多少条
        invoice_id: this.$route.query.invoiceId
      };
      Loading.show();
      http.post('pakj/invoice/getOrderByInvoiceId', param).then(res => {
        Loading.hide();
        this.$refs.scrollView.finishRefresh();
        this.$refs.scrollView.finishLoadMore();
        if (res.data.code === '000000') {
          if (res.data.data.length <= 0) {
            this.has_next_page = false;
          }
          for (var i = 0; i < res.data.data.length; i++) {
            res.data.data[i].createTime = moment(res.data.data[i].createTime).format(
              'YYYY-MM-DD dddd HH:mm'
            );
            // res.data.data[i].finishTime = moment(res.data.data[i].finishTime).format('YYYY-MM-DD HH:mm');
            this.data.push(res.data.data[i]);
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    onRefresh() {
      this.data = [];
      this.page_no = 1;
      this.has_next_page = true;
      this.invoicetripList(this.page_no);
    },
    onLoadMore() {
      if (this.has_next_page) {
        this.page_no += 1;
        this.invoicetripList(this.page_no);
      } else {
        this.$refs.scrollView.finishLoadMore();
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

#invoice {
  height: 100vh;
  background-color: color-primary-background;

  .scroll-view {
    height: calc(100vh - 108px);
    background-color: color-primary-background;
  }
}

.invoice_list {
  background-color: #fff;
  margin-top: 20px;
  padding: 20px 30px 30px 30px;
}

.invoice_list p {
  margin-top: 10px;
  color: #666;
  font-size: 28px;
}

.invoice_list p span {
  float: right;
}

.invoice_orderType {
  border: solid 1px #ccc;
  text-align: center;
  padding: 3px 8px;
  border-radius: 7px;
  font-size: 26px;
  color: #999;
}

.invoice_money {
  font-size: 36px;
  color: #333;
}

.shangchedian {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}
</style>
